<template>
  <div class="box">
    <div class="content">
      <div class="f1">
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <span class="back" @click="goBack">返回上一页</span>
          <el-breadcrumb-item>
            <img src="@/assets/user/icon.png" alt="" />
            <span class="span">金融服务</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span class="span" style="color: #666">票据询价</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="f2">
        <div class="f2_content">
          <div class="f2_content_top">票据询价</div>
          <div class="f2_content_bottom">
            <div class="f2_content_bottom_left">
              <!-- 图片上传 -->
              <div class="license">
                <div style="display: flex">
                  <!-- 图片上传 -->
                  <el-upload
                    action="#"
                    class="permit el-upload--picture-card permit-front"
                    list-type="picture-card"
                    :auto-upload="false"
                    accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
                    :on-change="handleChangeFront"
                    :http-request="uploadFileFront"
                    ref="pictureUpload1"
                    :file-list="fileListImg"
                  >
                    <div slot="file" slot-scope="{ file }">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" @click="handleRemove1(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </div>
              </div>
              <div class="btn">
                <button class="btn1" :disabled="isLock" @click="enquiry">提交询价</button>
              </div>
              <div class="myBill" @click="goBillAdministration">我的票据</div>
            </div>
            <div class="f2_content_bottom_right">
              <div class="hint">
                <img src="../../assets/image/组69.png" alt="" />
                <p>请确认票面信息是否正确</p>
              </div>
              <ul>
                <li>
                  <el-form
                    ref="ruleForm1"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="票据号码" prop="a">
                      <el-input type="string" v-model="bankCard.a" />
                    </el-form-item>
                  </el-form>
                  <el-form
                    ref="ruleForm2"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="票面金额" prop="c">
                      <el-input
                        @blur="costChangeC"
                        @focus="
                          () => {
                            this.bankCard.c = remoney(this.bankCard.c)
                          }
                        "
                        @input="limitInput($event, 'c')"
                        v-model="bankCard.c"
                        placeholder=""
                      ></el-input>
                      <p
                        style="
                          position: absolute;
                          right: 0.0521rem;
                          top: 0px;
                          z-index: 99;
                          font-size: 0.0938rem;
                          color: #3f6ef2;
                        "
                      >
                        元
                      </p>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form
                    ref="ruleForm3"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="承兑人名称" prop="b">
                      <el-input v-model="bankCard.b"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-form
                    ref="ruleForm4"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="票据到期日" prop="d">
                      <el-date-picker
                        :clearable="false"
                        v-model="bankCard.d"
                        type="date"
                        placeholder=""
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                      <p
                        style="
                          position: absolute;
                          right: 0.0521rem;
                          top: 0px;
                          z-index: 99;
                          font-size: 0.0833rem;
                        "
                      >
                        <img
                          style="width: 0.1146rem"
                          src="../../assets/shangpiao/日历.png"
                          alt=""
                        />
                      </p>
                    </el-form-item>
                  </el-form>
                </li>
                <li>
                  <el-form
                    ref="ruleForm5"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="承兑人银行账号" prop="e">
                      <el-input v-model="bankCard.e"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-form
                    ref="ruleForm6"
                    label-width="1.0417rem"
                    :model="bankCard"
                    :rules="bankCardRules"
                  >
                    <el-form-item label="承兑人开户行行号" prop="f">
                      <el-input v-model="bankCard.f"></el-input>
                    </el-form-item>
                  </el-form>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="f3">
        <div class="f3_content">
          <div class="f3_content_search" v-if="!isEnquiry">
            <div class="f3_content_search_input">
              <span>产品类型</span>
              <el-select class="abc" v-model="userState" placeholder="请选择">
                <el-option key="999" label="全部" value="8918"></el-option>
                <el-option key="1" label="商票贴现" value="商票贴现"></el-option>
                <el-option key="2" label="商票质押" value="商票质押"></el-option>
                <el-option key="3" label="银票贴现" value="银票贴现"></el-option>
                <el-option key="4" label="财票贴现" value="财票贴现"></el-option>
              </el-select>
            </div>
            <div class="f3_content_search_input" style="margin-left: 0.4271rem">
              <span>机构名称</span>
              <input
                @keyup.enter="selectkj()"
                type="text"
                placeholder="请输入机构名称"
                v-model="acceptorName"
              />
              <img @click="selectkj()" src="@/assets/shangpiao/组26.png" alt="" />
            </div>
          </div>
          <div v-loading="loading">
            <template v-if="item">
              <div class="f3_content_list">
                <div class="list" v-for="(item, index) in item" :key="index">
                  <div
                    class="tag"
                    :class="{
                      sptx: item.entProductSubKJYParam1.producttype == '商票贴现',
                      spzy: item.entProductSubKJYParam1.producttype == '商票质押',
                      yptx: item.entProductSubKJYParam1.producttype == '银票贴现',
                      cptx: item.entProductSubKJYParam1.producttype == '财票贴现',
                      ypzy: item.entProductSubKJYParam1.producttype == '银票质押',
                      cpzy: item.entProductSubKJYParam1.producttype == '财票质押'
                    }"
                  >
                    {{ item.entProductSubKJYParam1.producttype }}
                  </div>
                  <div class="list_left">
                    <img :src="item.path" alt="" />
                  </div>
                  <div class="list_right">
                    <h3 class="productName">
                      {{ item.entProductSubKJYParam1.productname }}
                    </h3>
                    <div class="product-item-success">
                      <ul>
                        <li>
                          <h4>{{ item.entProductSubKJYParam1.amount }}<span> </span></h4>
                          <!-- <h5>最高额度</h5> -->
                          <h5>{{ item.entProductSubKJYParam1.showamount }}</h5>
                        </li>
                        <li>
                          <h4>{{ item.entProductSubKJYParam1.month }}<span> </span></h4>
                          <!-- <h5>最高额度</h5> -->
                          <h5>{{ item.entProductSubKJYParam1.showmonth }}</h5>
                        </li>
                        <li>
                          <h4>{{ item.entProductSubKJYParam1.radio }}<span> </span></h4>
                          <!-- <h5>最高额度</h5> -->
                          <h5>{{ item.entProductSubKJYParam1.showradio }}</h5>
                        </li>
                      </ul>
                    </div>
                    <div class="product-item-apply">
                      <h4 @click="goApply(item.entProductSubKJYParam1)">立即申请</h4>
                      <p @click="goParticulars(item.entProductSubKJYParam1)">查看详情</p>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <!-- 点击询价显示 -->
            <template v-else>
              <div class="reminder" v-if="isEnquiry">
                <img src="../../assets/image/组69.png" alt="" />
                匹配如下产品，仅供参考，请稍后前往
                <span @click="goShangPiao">项目管理</span> 中查看精准的融资方案
              </div>
              <template v-if="enquiryList != 0">
                <div v-loading="loading">
                  <div class="f3_content_list">
                    <div class="list" v-for="(item, i) in enquiryList" :key="i">
                      <div
                        class="tag"
                        :class="{
                          sptx: item.productSub.show06 == '商票贴现',
                          spzy: item.productSub.show06 == '商票质押',
                          yptx: item.productSub.show06 == '银票贴现',
                          cptx: item.productSub.show06 == '财票贴现',
                          ypzy: item.productSub.show06 == '银票质押',
                          cpzy: item.productSub.show06 == '财票质押'
                        }"
                      >
                        {{ item.productSub.show06 }}
                      </div>
                      <div class="list_left">
                        <img :src="item.filepath" alt="" />
                      </div>
                      <div class="list_right">
                        <h3 class="productName">
                          {{ item.productSub.productname }}
                        </h3>
                        <div class="product-item-success">
                          <ul>
                            <li>
                              <h4>{{ item.productSub.amount }}<span> </span></h4>
                              <!-- <h5>最高额度</h5> -->
                              <h5>{{ item.productSub.showamount }}</h5>
                            </li>
                            <li>
                              <h4>{{ item.productSub.month }}<span> </span></h4>
                              <!-- <h5>最高额度</h5> -->
                              <h5>{{ item.productSub.showmonth }}</h5>
                            </li>
                            <li>
                              <h4>{{ item.productSub.radio }}<span> </span></h4>
                              <!-- <h5>最高额度</h5> -->
                              <h5>{{ item.productSub.showradio }}</h5>
                            </li>
                          </ul>
                        </div>
                        <div class="product-item-apply">
                          <h4 @click="goApplys(item.productSub)">立即申请</h4>
                          <p @click="goParticularss(item.productSub)">查看详情</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 空状态 -->
              <template v-else>
                <div class="null">
                  <img src="@/assets/shangpiao/组162.png" alt="" />
                  <p>暂无匹配产品</p>
                </div>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
    <!-- 查看上传的图片 -->
    <el-dialog :visible.sync="dialogVisible">
      <div v-viewer>
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { base, myPostFetch } from '@/utils'
export default {
  data() {
    return {
      format: ['yyyy-MM-dd'],
      isEnquiry: false,
      visible: false,
      title: '',
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      base: null,
      userState: '',
      acceptorName: '',
      userStates: 8918,
      fileListFront: [], //票据正面
      isLock: false,
      pageNum: 1,
      pageSize: 999,
      fileListImg: [
        {
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      enquiryList: [], //询价列表
      item: null,
      // 表单
      bankCard: {
        a: '',
        b: '',
        c: '',
        d: '20250904',
        e: '',
        f: '',
        serialno: ''
      },
      addform: {
        c: ''
      },
      // 表单校验
      bankCardRules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  // 监听器
  watch: {
    fileListFront() {
      if (this.fileListFront.length == 0) return
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      let token = sessionStorage.getItem('token')
      let url = this.base + '/api/BusinessSPs/ocr'
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            this.$Message.success('OCR识别成功')
            let bankCard = res.data.data.ticketdata
            this.bankCard.a = bankCard.draftNumber
            this.bankCard.b = bankCard.acceptorName
            // this.bankCard.c = bankCard.totalAmount;
            this.bankCard.d = this.formatDate(bankCard.validToDate)
            this.bankCard.e = bankCard.acceptorAccountNumber
            this.bankCard.f = bankCard.acceptorBankNumber
            this.bankCard.serialno = res.data.data.fileId
            if (parseInt(Number(bankCard.totalAmount), 10) != Number(bankCard.totalAmount)) {
              this.bankCard.c = Number(bankCard.totalAmount).toLocaleString()
            } else {
              this.bankCard.c = Number(bankCard.totalAmount).toLocaleString() + '.00'
            }
            this.addform.c = bankCard.totalAmount
            //
            let params = {
              draftNumber: res.data.data.ticketdata.draftNumber,
              totalAmount: res.data.data.ticketdata.totalAmount,
              acceptorBankNumber: res.data.data.ticketdata.acceptorBankNumber,
              acceptorAccountNumber: res.data.data.ticketdata.acceptorAccountNumber,
              acceptorName: res.data.data.ticketdata.acceptorName,
              validToDate: res.data.data.ticketdata.validToDate,
              issueDate: res.data.data.ticketdata.issueDate,
              draftStatus: res.data.data.ticketdata.draftStatus,
              issuerName: res.data.data.ticketdata.issuerName,
              issuerAccountNumber: res.data.data.ticketdata.issuerAccountNumber,
              issuerAccountBank: res.data.data.ticketdata.issuerAccountBank,
              payeeName: res.data.data.ticketdata.payeeName,
              payeeAccountNumber: res.data.data.ticketdata.payeeAccountNumber,
              payeeAccountBank: res.data.data.ticketdata.payeeAccountBank,
              totalAmountInWords: res.data.data.ticketdata.totalAmountInWords,
              acceptorAccountBank: res.data.data.ticketdata.acceptorAccountBank,
              agreementNumber: res.data.data.ticketdata.agreementNumber,
              assignability: res.data.data.ticketdata.assignability,
              acceptanceDate: res.data.data.ticketdata.acceptanceDate,
              fileId: res.data.data.fileId
            }
            params = JSON.stringify(params)
            sessionStorage.setItem('ocr', params)
          } else {
            this.$Message.error('OCR识别失败')
          }
        })
    },
    userState() {
      this.userStates = this.userState
      this.pageNum = 1
      this.pageSize = 999
      this.selectkj()
    }
  },
  mounted() {
    this.selectkj()
    this.fileListImg[0].url = sessionStorage.getItem('file')
    this.base = base
    let bankCard = JSON.parse(sessionStorage.getItem('ocr'))
    this.ocrData = JSON.parse(sessionStorage.getItem('ocr'))
    this.imgUrl = sessionStorage.getItem('file')
    this.bankCard.a = bankCard.draftNumber
    this.bankCard.b = bankCard.acceptorName
    this.bankCard.d = this.formatDate(bankCard.validToDate)
    this.bankCard.e = bankCard.acceptorAccountNumber
    this.bankCard.f = bankCard.acceptorBankNumber
    this.bankCard.serialno = bankCard.fileId
    if (parseInt(Number(bankCard.totalAmount), 10) != Number(bankCard.totalAmount)) {
      this.bankCard.c = Number(bankCard.totalAmount).toLocaleString()
    } else {
      this.bankCard.c = Number(bankCard.totalAmount).toLocaleString() + '.00'
    }
    this.addform.c = bankCard.totalAmount
  },
  methods: {
    // 格式化时间
    formatDate(date) {
      if (date.split('-').length != 1) return date
      let year = date.slice(0, 4)
      let month = date.slice(4, 6)
      let d = date.slice(6, 8)
      return year + '-' + month + '-' + d
    },
    // 跳转认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    },
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    },
    goShangPiao() {
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        this.$router.push('/projectShangPiao?row=1')
        setTimeout(() => {
          this.$router.go(0)
        }, 100)
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    // 跳转至 我的票据
    goBillAdministration() {
      this.$router.push('/billAdministration')
    },
    costChangeC(e) {
      this.addform.c = this.bankCard.c
      //获取输入的数据，若不写这行，数据可能输不进去
      this.bankCard.c = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.bankCard.c = this.fmoney(this.bankCard.c)
    },
    // 产品列表
    async selectkj() {
      this.loading = true
      let url = '/api/products/selectallSP'
      let params = {
        orgname: this.acceptorName,
        producttype: this.userStates,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let data = await myPostFetch(url, params)
      if (data.data.list.length != 0 || data.data.list == 'null') {
        this.item = data.data.list
        this.loading = false
      } else {
        this.item = null
        this.loading = false
      }
    },
    // 立即询价
    enquiry() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate() // 获取当前日(1-31)
      if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
      let aaaaaaa = `${year}-${month}-${strDate}`
      this.loading = true
      let groupNameList = []
      let {
        issueDate,
        draftStatus,
        issuerName,
        issuerAccountNumber,
        issuerAccountBank,
        payeeName,
        payeeAccountNumber,
        payeeAccountBank
      } = this.ocrData
      let { a, b, d, e, f, serialno } = this.bankCard
      let { c } = this.addform
      if (d < aaaaaaa) {
        this.$Message.error('票据到期日不可小于当前日期')
        this.loading = false
        return
      }
      if (
        a.trim() == '' ||
        b.trim() == '' ||
        c.trim() == '' ||
        d.trim() == '' ||
        e.trim() == '' ||
        f.trim() == ''
      )
        return this.$Message.error('请填写信息')
      let formData = {}
      let token = sessionStorage.getItem('token')
      let rzstatus = ''
      sessionStorage.getItem('rzstatus') == 'succ'
        ? (rzstatus = sessionStorage.getItem('rzstatus'))
        : (rzstatus = '')
      let coopid = ''
      sessionStorage.getItem('coopid') != 'null'
        ? (coopid = sessionStorage.getItem('coopid'))
        : (coopid = '')
      let url =
        this.base +
        `/api/BusinessSPs/finSPs?billnumber=${a}&acceptorname=${b}&faceamount=${c}&billdate=${d}&acceptorbanking=${e}&acceptorbank=${f}&serialno=${serialno}&drawerdate=${issueDate}&ticketstatus=${draftStatus}&outticketname=${issuerName}&outticketaccount=${issuerAccountNumber}&outticketbank=${issuerAccountBank}&receiveticketname=${payeeName}&receiveticketaccount=${payeeAccountNumber}&receiveticketbank=${payeeAccountBank}&entrz=${rzstatus}&customerid=${coopid}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            let sPpriceinfoId = res.data.data.sPpriceinfo.id
            let applyid = ''
            rzstatus != 'succ' ? (applyid = '') : (applyid = res.data.data.businessApply.id)
            // 匹配产品
            let url = '/api/BusinessSPs/listproduct'
            let params = {
              applyid: applyid,
              billdate: d,
              entname: b,
              pmje: c,
              customerid: coopid
            }
            let listproduct = myPostFetch(url, params)
            listproduct
              .then(res => {
                this.isEnquiry = true
                if (res.code != 100) return
                this.loading = false
                this.item = null
                this.enquiryList = res.data
                if (this.enquiryList.length == 0) this.$Message.error('产品匹配失败')
                this.state = true
                let list = res.data
                if (list.length != 0) {
                  for (let i = 0; i < list.length; i++) {
                    if (!list[i].productSub.funder) return
                    groupNameList.push(list[i].productSub.funder)
                  }
                  groupNameList = groupNameList.join('@')
                  let url = '/api/BusinessSPs/updatepjrzxx'
                  let params = {
                    funder: groupNameList,
                    pjid: sPpriceinfoId
                  }
                  myPostFetch(url, params)
                    .then(res => {})
                    .catch(err => {
                      this.$Message.error('产品匹配失败')
                    })
                }
              })
              .catch(err => {
                this.$Message.error('产品匹配失败')
              })
          } else {
            this.$Message.error('产品匹配失败')
            this.loading = false
          }
        })
    },
    // 立即申请
    goApply(item) {
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        if (
          item.producttype == '商票贴现' ||
          item.producttype == '银票贴现' ||
          item.producttype == '财票贴现' ||
          item.producttype == '财票质押' ||
          item.producttype == '银票质押'
        ) {
          let productcode = item.productcode
          let productname = item.productname
          let producttype = item.producttype
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          localStorage.setItem('producttype', producttype)
          this.$router.push('/sptxApplication')
        } else if (item.producttype == '商票质押') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          this.$router.push('/spzyApplication')
        }
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 产品详情
    goParticulars(item) {
      if (
        item.producttype == '商票贴现' ||
        item.producttype == '银票贴现' ||
        item.producttype == '财票贴现' ||
        item.producttype == '财票质押' ||
        item.producttype == '银票质押'
      ) {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/sptxApplication?row=2')
      } else if (item.producttype == '商票质押') {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/spzyApplication?row=2')
      }
    },
    // 询价申请
    goApplys(item) {
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        if (
          item.show06 == '商票贴现' ||
          item.show06 == '银票贴现' ||
          item.show06 == '财票贴现' ||
          item.show06 == '财票质押' ||
          item.show06 == '银票质押'
        ) {
          let productcode = item.productcode
          let productname = item.productname
          let producttype = item.show06
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          localStorage.setItem('producttype', producttype)
          this.$router.push('/sptxApplication')
        } else if (item.show06 == '商票质押') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          this.$router.push('/spzyApplication')
        }
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 产品详情
    goParticularss(item) {
      if (
        item.show06 == '商票贴现' ||
        item.show06 == '银票贴现' ||
        item.show06 == '财票贴现' ||
        item.show06 == '财票质押' ||
        item.show06 == '银票质押'
      ) {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/sptxApplication?row=2')
      } else if (item.show06 == '商票质押') {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/spzyApplication?row=2')
      }
    },
    // 上传
    delFile() {
      this.fileListFront = []
    },
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw
      this.file = JSON.stringify(file)
    },
    //自定义上传文件
    uploadFileFront(file) {
      this.formData.append('file', file.file)
    },
    // 删除
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file)
      this.fileListFront = []
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 金额
    // 表单格式转换
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    },
    // 防止重复提交
    throttle() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 5000)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 10rem;

  background-color: rgb(242, 244, 247);
  .content {
    margin: 0 auto;
    width: 8.4375rem;

    .f1 {
      display: flex;
      align-items: center;
      width: 8.4375rem;
      height: 0.4115rem;
      // 返回上一页
      .back {
        position: absolute;
        left: 2.6rem;
        font-size: 0.0833rem;
        color: #3f6ef2;
        text-decoration: underline;
        user-select: none;
        cursor: pointer;
      }
      // 面包屑
      .breadcrumb {
        display: flex;
        align-items: center;
        height: 0.3958rem;
        font-size: 0.0833rem;
        background-color: rgb(242, 244, 247);
        .icon {
          margin: 0 0.0521rem 0 0.0208rem;
        }
        .span {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
        }
        img {
          width: 0.0938rem;
          height: 0.0938rem;
          margin-right: 0.026rem;
        }
      }
    }
    .f2 {
      width: 8.4375rem;
      height: 2.4271rem;
      box-sizing: border-box;
      padding: 0.2031rem 0;
      background: #ffffff;
      box-shadow: 0px 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
      border-radius: 0.0521rem;
      .f2_content {
        margin: 0 auto;
        width: 7.8125rem;
        height: 100%;
        .f2_content_top {
          width: 100%;
          height: 0.3125rem;
          border-bottom: 1px solid #bfbfbf;
          font-size: 0.1563rem;
          font-weight: bold;
          color: #3f6ef2;
        }
        .f2_content_bottom {
          display: flex;
          box-sizing: border-box;
          padding: 0.2083rem 0;
          width: 7.8125rem;
          .f2_content_bottom_left {
            width: 1.6094rem;
            height: 1.5rem;
            // 上传
            .license {
              display: flex;
              justify-content: center;
              margin-bottom: 0.1042rem;
              .permit {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 1.4583rem;
                height: 0.8333rem;

                margin-left: 0.0625rem;
                overflow: hidden;
                cursor: pointer;
              }
              .permit-front {
                background: url(@/assets/shangpiao/组132.png) no-repeat;
                background-size: 100% 100%;
              }
            }
            .btn {
              display: flex;
              justify-content: center;
              width: 100%;
              margin-top: 0.2083rem;
              .btn1 {
                cursor: pointer;
                width: 0.9375rem;
                height: 0.1979rem;
                background: linear-gradient(-90deg, #5d98f8, #4b5af8);
                box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(0, 40, 193, 0.5);
                border-radius: 0.0208rem;
                font-size: 0.0938rem;
                font-weight: 400;
                color: #ffffff;
              }
            }
            .myBill {
              display: flex;
              justify-content: center;
              cursor: pointer;
              width: 100%;
              font-size: 0.0729rem;
              font-weight: 400;
              color: #93a2cd;
              margin-top: 0.1042rem;
            }
          }
          .f2_content_bottom_right {
            box-sizing: border-box;
            padding-left: 0.4167rem;
            flex: 1;
            .hint {
              display: flex;
              align-items: center;
              width: 100%;
              margin-bottom: 0.125rem;
              margin-left: 0.9167rem;
              img {
                width: 0.099rem;
                height: 0.099rem;
              }
              p {
                box-sizing: border-box;
                padding-left: 0.0781rem;
                width: 1.365rem;
                height: 0.1354rem;
                background: #f2f2f2;
                font-size: 0.0833rem;
                font-weight: 400;
                color: #999999;
                margin-left: 0.026rem;
              }
            }
            ul {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              li {
                width: 100%;
                margin-bottom: 0.0938rem;
                height: 0.2604rem;
                display: flex;
                justify-content: space-between;
                .el-form {
                  width: 2.6563rem;
                  background-color: #fff;
                }
                .message {
                  margin-top: 0.0573rem;
                  font-size: 0.0625rem;
                  font-family: Source Han Sans SC;
                  font-weight: 300;
                  color: #ef2d46;
                }
              }
            }
          }
        }
      }
    }
    .f3 {
      box-sizing: border-box;
      padding: 0.2604rem 0 0.5313rem 0;
      width: 8.4375rem;
      background-color: #f2f4f7;
      .f3_content {
        width: 8.4375rem;
        margin: 0 auto;
        .f3_content_title {
          font-size: 0.2292rem;
          font-weight: 500;
          color: #000000;
          margin-bottom: 0.2604rem;
        }
        .f3_content_search {
          display: flex;
          align-items: center;
          width: 100%;
          .f3_content_search_input {
            position: relative;
            display: flex;
            align-items: center;
            input {
              position: relative;
              box-sizing: border-box;
              height: 0.224rem;
              width: 1.6406rem;
              font-size: 0.0729rem;
              border: 0.0052rem solid #e0e0e0;
              padding: 0.0521rem 0.0521rem;
              color: #606266;
              outline: 0;
            }
            input::-webkit-input-placeholder {
              font-size: 0.0833rem;
              color: #afb1bd;
            }
            span {
              font-size: 0.1042rem;
              font-weight: 500;
              color: #333333;
              margin-right: 0.1042rem;
            }
            img {
              cursor: pointer;
              position: absolute;
              right: 0.0781rem;
            }
          }
        }
        .reminder {
          display: flex;
          align-items: center;
          width: 100%;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #333333;
          img {
            width: 0.1042rem;
            height: 0.1042rem;
            margin-right: 0.0521rem;
          }
          span {
            cursor: pointer;
            color: #3f6ef2;
            text-decoration: underline;
          }
        }
        .f3_content_list {
          .list {
            display: flex;
            position: relative;
            box-sizing: border-box;
            padding: 0.1042rem 0.6563rem 0.1042rem 0.4167rem;
            width: 8.4375rem;
            height: 1.1458rem;
            background: #ffffff;
            box-shadow: 0px 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
            border-radius: 0.0208rem;
            margin-top: 0.1563rem;
            .tag {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0px;
              left: 0px;
              width: 0.5104rem;
              height: 0.125rem;
              background: #13b5b1;
              border-radius: 0.0208rem 0px 0px 0px;
              font-size: 0.0833rem;
              font-weight: 400;
              color: #ffffff;
              &.sptx {
                background: #3f6ef2;
              }
              &.spzy {
                background: #ff6060;
              }
              &.yptx {
                background: #e8903c;
              }
              &.cptx {
                background: #13b5b1;
              }
              &.ypzy {
                background: #ad5afa;
              }
              &.cpzy {
                background: #20b5da;
              }
            }
            .list_left {
              display: flex;
              align-items: center;
              width: 1.6406rem;
              height: 0.9375rem;
              border-right: 0.0052rem solid #e5e5e5;
              img {
                width: 1.3021rem;
              }
            }
            .list_right {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex: 1;
              width: 0.7813rem;
              height: 0.9375rem;
              margin-left: 0.5573rem;
              .productName {
                font-size: 0.1563rem;
                font-weight: 500;
                color: #000000;
              }
              .product-item-success {
                ul {
                  display: flex;
                  justify-content: space-around;
                  li {
                    width: 1.0417rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 0.3646rem;
                    h4 {
                      font-size: 0.1667rem;
                      font-weight: 400;
                      color: #e8903c;
                      span {
                        font-size: 0.0938rem;
                      }
                    }
                    h5 {
                      font-size: 0.0938rem;
                      font-weight: 400;
                      color: #858585;
                    }
                  }
                }
              }
              .product-item-apply {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                height: 0.4479rem;
                cursor: pointer;
                h4 {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 0.8333rem;
                  height: 0.2188rem;
                  background: linear-gradient(-90deg, #5d98f8, #4b5af8);
                  box-shadow: 0px 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
                  border-radius: 0.0208rem;
                  font-size: 0.0938rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #ffffff;
                  cursor: pointer;
                }
                p {
                  text-align: center;
                  width: 0.5rem;
                  height: 0.1302rem;
                  font-size: 0.0833rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  // text-decoration: underline;
                  color: #738bd0;
                  border-bottom: 0.0052rem solid #738bd0;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
}
.null {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  p {
    font-size: 16px;
    color: #b3b3b3;
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 46px;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
// 上传
::v-deep .el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 1.4844rem;
  height: 0.8594rem;
  margin: 0;
  z-index: 998;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 1.4844rem;
}
::v-deep .el-upload--picture-card {
  line-height: 0;
}
/* 下拉选择器 */
::v-deep .el-input__inner {
  box-sizing: border-box;
  padding: 0 0.0521rem;
  width: 1.6667rem;
  height: 0.2188rem;
  border: 0.0052rem solid #e0dede;
  border-radius: 0.0313rem;
  font-size: 0.0938rem;
  line-height: 0.1823rem !important;
}
::v-deep .abc .el-input__inner {
  border-radius: 0px;
  padding: 0 0.0781rem;
  height: 0.224rem;
  width: 1.6667rem;
  &::placeholder {
    font-size: 0.0833rem;
    color: #afb1bd;
  }
}
::v-deep .abc .el-select {
  width: 1.6667rem;
}
::v-deep .el-icon-arrow-up:before {
  content: '';
}
::v-deep .el-icon-date:before {
  content: '';
}
::v-deep .el-form-item__label {
  font-size: 0.099rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-left: 0.0521rem;
}
// 面包屑
::v-deep .el-breadcrumb {
  font-size: 0.0833rem;
}
::v-deep .el-breadcrumb__separator {
  margin: 0 0.026rem;
}
</style>
